<script setup lang='ts' name="elevator">
import { useStoreDict } from '@/store/modules/dict'
// import { computed } from 'vue'

// const el = document.querySelector('.el-scrollbar__wrap')

// const isTop = computed(() => {
//     return !el?.scrollTop ? false : el.scrollTop > 50
// })

const { dicts, initJc } = useStoreDict()
initJc(['jc_contact_number', 'jc_working_hours'])

// function backTop() {
//     let top = el!.scrollTop
//     const raf = requestAnimationFrame(() => {
//         el!.scrollTop = top -= 50
//         if (top <= 0)
//             cancelAnimationFrame(raf)
//     })
// }

// function handleClick() {
//     ElMessage.error('功能开发中,敬请期待！')
// }
</script>

<template>
    <div class="divide divide-y divide-gray-2 bg-white rounded-4 flex flex-col fixed bottom-100 right-32 z-999">
        <el-popover placement="top-start"
                    :width="250"
                    trigger="hover"
        >
            <template #reference>
                <div class="text-14 text-#E54343 flex flex-col size-60 cursor-pointer justify-center items-center transition-all">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink"
                         fill="none"
                         version="1.1"
                         width="20"
                         height="20"
                         viewBox="0 0 20 20"
                    >
                        <defs>
                            <clipPath id="master_svg0_3913_42056">
                                <rect x="0"
                                      y="0"
                                      width="20"
                                      height="20"
                                      rx="0"
                                />
                            </clipPath>
                        </defs>

                        <g clip-path="url(#master_svg0_3913_42056)">
                            <g>
                                <path d="M17.5832,15.4971C18.0229,15.9378,18.0229,16.6513,17.5832,17.0921L16.785600000000002,17.8897C16.196199999999997,18.479,15.421,18.838,14.4815,18.9569C14.2484,18.986,14.0138,19.0004,13.779,19C13.0952,19,12.3574,18.8845,11.5764,18.6548C9.45661,18.0318,7.22709,16.6267,5.30043,14.6995C3.37376,12.7722,1.9680659999999999,10.54345,1.345019,8.4235C1.034835,7.36733,0.9327564,6.38998,1.0430126,5.51907C1.161869,4.5794999999999995,1.520837,3.80433,2.1101900000000002,3.21498L2.90778,2.41739C3.34855,1.977672,4.06207,1.977672,4.502829999999999,2.41739L8.01228,5.92668C8.452020000000001,6.36749,8.452020000000001,7.08104,8.01228,7.52186L7.21469,8.31888C6.76351,8.77006,7.21257,10.23101,8.49081,11.5091C9.76905,12.7872,11.2293,13.237,11.6811,12.7852L12.4787,11.9876C12.9195,11.5479,13.633,11.5479,14.0738,11.9876L17.5832,15.4971ZM11.7812,7.31643C12.2793,7.31697,12.683,7.72065,12.6835,8.218779999999999C12.6839,8.46771,12.8858,8.66933,13.1347,8.66933C13.3836,8.66933,13.5855,8.46771,13.5859,8.218779999999999C13.5848,7.22252,12.7774,6.41517,11.7812,6.41408C11.532,6.41408,11.33,6.61608,11.33,6.86526C11.33,7.11443,11.532,7.31643,11.7812,7.31643ZM18.4325,5.40881C17.3042,2.73501,14.6833,0.99778723,11.7812,1.00000227184C11.532,1.00000227184,11.33,1.202,11.33,1.451176C11.33,1.700352,11.532,1.902349,11.7812,1.902349C15.2637,1.902349,18.0976,4.73628,18.0976,8.218779999999999C18.0976,8.46795,18.2996,8.66995,18.5488,8.66995C18.798,8.66995,19,8.46795,19,8.218779999999999C19.0018,7.25348,18.8088,6.29774,18.4325,5.40881ZM11.7812,4.609389999999999C13.7714,4.609389999999999,15.3906,6.22854,15.3906,8.218779999999999C15.3906,8.46795,15.5926,8.66995,15.8417,8.66995C16.090899999999998,8.66995,16.2929,8.46795,16.2929,8.218779999999999C16.2929,5.72701,14.2729,3.70704,11.7812,3.70704C11.532,3.70704,11.33,3.90904,11.33,4.15822C11.33,4.4073899999999995,11.532,4.609389999999999,11.7812,4.609389999999999Z"
                                      fill="#E54343"
                                      fill-opacity="1"
                                      style="mix-blend-mode:passthrough"
                                />
                            </g>
                        </g>
                    </svg>

                    <div class="mt-5px text-12 c-#E54343">
                        联系电话
                    </div>
                </div>
            </template>

            <template #default>
                <div class="text-14">
                    <p class="c-#353535">
                        联系电话：
                    </p>

                    <p class="mb-10 text-12 c-#575757">
                        <span v-for="(item, idx) in dicts.jc_contact_number"
                              :key="idx"
                        >
                            {{ item.dictValue }}<span v-if="idx !== dicts.jc_contact_number.length - 1">、</span>
                        </span>
                    </p>

                    <p class="c-#353535">
                        工作时间：
                    </p>

                    <p class="text-12 c-#575757">
                        <span v-for="(item, idx) in dicts.jc_working_hours"
                              :key="idx"
                        >
                            {{ item.dictLabel }}<span v-if="idx !== dicts.jc_working_hours.length - 1">、</span>
                        </span>
                    </p>
                </div>
            </template>
        </el-popover>

        <!-- <div class="relative h-70 w-60 flex flex-col cursor-pointer items-center justify-center text-14 text-black transition-all hover:(bg-red text-white)">
            <div class="absolute left-0 top-4 z-100">
                <ElBadge :value="200"
                         :max="99"
                         type="primary"
                         :show-zero="false"
                />
            </div>

            <div i-mdi:cart
                 class="mb-4 mt-10 size-16"
            />

            <div>购物车</div>
        </div> -->

        <!-- <div class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="handleClick"
        >
            <div i-bx:support
                 class="mb-4 size-16"
            />

            <div>
                客服
            </div>
        </div>

        <div class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="handleClick"
        >
            <div i-ri:edit-fill
                 class="mb-4 size-16"
            />

            <div>反馈</div>
        </div> -->

        <!-- <div v-show="isTop"
             class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="backTop"
        >
            <div i-teenyicons:up-outline
                 class="mb-4 size-16"
            />

            <div>顶部</div>
        </div> -->
    </div>
</template>
